<template>
  <div class="content">
    <h3 class="user-title">{{'REALNAME_VERIF'|t}}</h3>
    <!-- 审核中 -->
    <div class="" v-show="state==0">
      <p class="shen-he">{{'REVIEW'|t}}</p>
    </div>
    <!-- 审核完成 -->
    <div class="" v-show="state==1">
      <p class="shen-he">{{'APPROVED'|t}}</p>
    </div>
    <!-- 实名认证未通过 -->
    <div class="" v-show="state==2">
      <p class="shen-he">{{'AUTHENTICATIONFAILED'|t}}</p>
      <p class="error-reason">{{'REASON'|t}}：{{getRealInfoRes.reason}}</p>
      <div style="text-align:center">
        <a href="javascript:;" class="again" @click="state=3">{{'RECERTIFICATION'|t}}>></a>
      </div>
    </div>
    <div class="form" v-show='state==3'>
      <zx-form-group :title="$t('REQUIRE_ADDRESS')" class='boxShadow'>
        <zx-select :place="$t('REQUIRE_ADDRESS')" v-model="realNameForm.address" ref="address" :rules='rules.address'>
          <zx-option :value="item.id" v-for="(item,key) of ZoneList" :key="key">({{item.zone_name}})</zx-option>
        </zx-select>
      </zx-form-group>
      <zx-form-group :title="$t('REALNAME')">
        <zx-input v-model="realNameForm.realName" :place="$t('REALNAME_PLACE')" ref="realName" :rules='rules.realName'>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('IDENTIFY')">
        <zx-input v-model="realNameForm.identity" :place="$t('IDENTIFY_PLACE')" ref="identity" :rules='rules.identity'>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('DOCUMENT_STATING_DATE')">
        <div class="box-flex border-b">
          <div class="form-input flex" @click.stop.prevent='openPicker("picker","startTime")'>
            <zx-input v-model="realNameForm.startTime" :place="$t('START_DATE')" disabled ref='startTime' :rules='rules.startTime'></zx-input>
          </div>
          <div class="form-input flex" @click.stop.prevent='openPicker("picker","endTime")'>
            <zx-input v-model="realNameForm.endTime" :place="$t('END_DATE')" disabled ref='endTime' :rules='rules.endTime'></zx-input>
          </div>
        </div>
      </zx-form-group>
      <mt-datetime-picker v-model="picker" ref="picker" type="date" @confirm="handleConfirm($event,type)" year-format="{value} 年"
        month-format="{value} 月" date-format="{value} 日">
      </mt-datetime-picker>
      <!-- 上传手持证件 -->
      <div class="form-file">
        <div class="form-input-file imgHandSrc">
          <img src="" alt="" id="imgHandSrc">
          <input type="file" @change="changeFile($event,'imgHandSrc','imgHand')" id="imgHand">
        </div>
        <div class="form-input-text" @click="uploadFIle('imgHand')">{{'IMGHANDSRC'|t}}</div>
      </div>
      <!-- 上传证件正面 -->
      <div class="form-file">
        <div class="form-input-file imgFaceSrc">
          <img src="" alt="" id="imgFaceSrc">
          <input type="file" @change="changeFile($event,'imgFaceSrc','imgFace')" id="imgFace">
        </div>
        <div class="form-input-text" @click="uploadFIle('imgFace')">{{'IMGFACESRC'|t}}</div>
      </div>
      <!-- 上传证件反面 -->
      <div class="form-file">
        <div class="form-input-file imgBackSrc">
          <img src="" alt="" id="imgBackSrc">
          <input type="file" @change="changeFile($event,'imgBackSrc','imgBack')" id="imgBack">
        </div>
        <div class="form-input-text" @click="uploadFIle('imgBack')">{{'IMGBACKSRC'|t}}</div>
      </div>
      <zx-form-group>
        <input type="submit" class="submit-btn mt-20 green-btn" :value="$t('SUBMIT_REALNAME_BTN')" @click="submitForm('realNameForm')">
      </zx-form-group>
    </div>

  </div>
</template>
<script>
  import { User } from '@/services';
  import { Form, Func, Auth, Rules } from '@/providers';
  export default {
    data() {
      return {
        state: 11, // state的状态0：待审核，1：审核已通过，2：审核未通过，3：还未实名认证
        defalutIndex: 1,
        getRealInfoRes: {},
        type: '',
        picker: '',
        ZoneList: [],
        rules: {
          address: { required: true },
          realName: { required: true },
          identity: { required: true, pattern: 'identity', msg: this.$t('IDENTITY_ERROR') },
          startTime: { required: true },
          endTime: { required: true },
          email: { required: true, pattern: 'email', msg: this.$t('ERROR_EMAIL') },
          password: { required: true }
        },
        realNameForm: Rules
      };
    },
    methods: {
      // 时间插件
      openPicker(pickerName, type) {
        this.type = type;
        this.$refs[pickerName].open();
      },
      // 时间插件
      handleConfirm(value, type) {
        this.realNameForm[type] = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
      },
      // 表单提交
      async submitForm(formName) {
        if (!Form.validataForm(this, formName)) {
          return false;
        };
        if (!this[formName].imgHand) {
          Form.Totas(this.$t('IMGHANDSRC'));
          return;
        };
        if (!this[formName].imgFace) {
          Form.Totas(this.$t('IMGFACESRC'));
          return;
        };
        if (!this[formName].imgBack) {
          Form.Totas(this.$t('IMGBACKSRC'));
          return;
        };
        let _form = this[formName];
        let parmas = new FormData();
        parmas.append('user_no', Auth.getItem('userId'));
        parmas.append('token', Auth.getItem('token'));
        parmas.append('address', _form.address);
        parmas.append('realName', _form.realName);
        parmas.append('identity', _form.identity);
        parmas.append('startDate', _form.startTime);
        parmas.append('endDate', _form.endTime);
        parmas.append('imgHand', _form.imgHand);
        parmas.append('imgFace', _form.imgFace);
        parmas.append('imgBack', _form.imgBack);
        try {
          let res = await User.AddIdendityImg(parmas);
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc);
        } catch (error) {
          console.log(error);
        }
      },
      // 文件上传
      changeFile($event, type, formInputValue) {
        var input = $event.target;
        var reader = new FileReader();
        reader.onload = () => {
          var dataURL = reader.result;
          var output = document.getElementById(type);
          output['src'] = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
        this.realNameForm[formInputValue] = input.files[0];
      },
      // 点击上传文件
      uploadFIle(id) {
        document.getElementById(id).click();
      },
      async getStatus() {
        try {
          let res = await User.GetIdendityInfByUserNo({
            user_no: Auth.getItem('userId'),
            token: Auth.getItem('token')
          });
          if (!Form.checkResToken) {
            this.state = 3;
            return;
          }
          this.state = res.data.state;
          this.getRealInfoRes = res.data;
          console.log(res);
        } catch (error) {
          console.log(error);
        }
      },
      async GetIdendityZone() {
        try {
          let res = await User.GetIdendityZone();
          this.ZoneList = res.data;
          console.log(res);
        } catch (error) {
          console.log(error);
        }
      }
    },
    created() {
      this.GetIdendityZone();
      this.getStatus();
    }
  };
</script>
<style scoped lang="scss">
  @import "../../assets/sass/user.scss";
  .form-input-file img {
    height: 100%;
    width: 100%;
  }

  .imgHandSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap1.png") center center no-repeat;
  }

  .imgFaceSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap2.png") center center no-repeat;
  }

  .imgBackSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap3.png") center center no-repeat;
  }
</style>